<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css_demo</title>

    <!-- html页面的加载方式是从上到下,将css放到上面就会先加载,
     在网络很差的时候,先加载出样式,不至于让用户体验那么差 -->
    <style>
        /* 内部样式 */
        /* 元素选择器 */
        /* p {
            color: red;
            font-size: 30px;
        } */

        /* 类选择器 */
        .div_class {
            color: aqua;
        }

        /* id选择器 */
        #aaa {
            color: brown;
        }

        /* 通配符选择器 */
        /* * {
            color: yellow;
        } */

        /* 复合选择器表示取交集 */
        p.pink {
            color: pink;
        }

        ul li {
            color: rgb(212, 62, 162);
        }

        div,
        span {
            font-size: 40px;
        }
    </style>

    <!-- 外部样式 -->
    <link rel="stylesheet" href="css.css">
</head>

<body>
    <!-- 就近原则,哪个样式离标签更近,就显示哪个样式 -->
    <p class="pink">hello</p>
    <p>你好呀</p>
    <!-- 行内样式 -->
    <span style="color:rgb(0, 128, 0);">你好</span>
    <div class="div_class">类选择器</div>
    <!-- 多个标签的class可以一样,但是id值必须不同,不能重复 -->
    <div>
        <!-- ul->无序列表 -->
        <ul>
            <li id="aaa">aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
        <ol>
            <!-- ol->有序列表 -->
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ol>
    </div>
</body>

</html>